<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <title>裁剪查看图片的大小</title>
    <link rel="stylesheet" href="js/jcrop/jquery.Jcrop.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jcrop/jquery.Jcrop.min.js"></script>
    <script>

      $(function(){
          //$('#face').Jcrop();
      })

      $(function(){

          $('#face').Jcrop({
              aspectRatio:0,
              onSelect: updateCoords
          });

      });

      function updateCoords(c)
      {
          $('#x').val(c.x);
          $('#y').val(c.y);
          $('#w').val(c.w);
          $('#h').val(c.h);
      };

      function checkCoords()
      {
          if (parseInt($('#w').val())) return true;
          alert('请选择');
          return false;
      };


    </script>

  </head>
  <body>
  <img src="img/p.jpg" alt="" id="face">
  <hr>
  <form action="jcrop.jsp" method="post" onsubmit="return checkCoords();">
    <input type="hidden" id="x" name="x">
    <input type="hidden" id="y" name="y">
    <input type="hidden" id="w" name="w">
    <input type="hidden" id="h" name="h">
    <input type="submit" value="裁剪">
  </form>

  </body>
</html>
